<template>
	<view>
		
		<view>
			<view>横向滚动，标签</view>
			<scroll-view scroll-x="true" style="white-space: nowrap;">
				<view style="display: inline-block; margin-right: 20px;" v-for="(tag,index) in tagList" :key="index">
					<u-tag :text="tag.name" shape="circle" 
							:plain="!tag.checked" :type="tag.checked?'primary':'info'" :color="tag.checked?'':'#2C3E50'"
							:name="index" @click="clickTag"></u-tag>
				</view>
			</scroll-view>
		</view>
		
		<!-- 不建议放在层层嵌套的view中，除非您清楚知道自己为什么需要这么做 -->
		<u-sticky bgColor="#FFF">
			<u-tabs :list="list1" @click="click"></u-tabs>
		</u-sticky>
		<view v-for="i in 30" :key="i">
			{{'区域'+i}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tagList: [
					{
						name: '全部',
						checked: true,
					},
					{
						name: '都市',
						checked: false,
					},
					{
						name: '仙侠',
						checked: false,
					},
					{
						name: '都市',
						checked: false,
					},
					{
						name: '仙侠',
						checked: false,
					},
					{
						name: '都市',
						checked: false,
					},
					{
						name: '仙侠',
						checked: false,
					},
					{
						name: '都市',
						checked: false,
					},
					{
						name: '仙侠',
						checked: false,
					},
				],
				
				list1: [{
					name: '关注',
				}, {
					name: '推荐',
				}, {
					name: '电影'
				}, {
					name: '科技'
				}, {
					name: '音乐'
				}, {
					name: '美食'
				}, {
					name: '文化'
				}, {
					name: '财经'
				}, {
					name: '手工'
				}]
			}
		},
		onLoad() {

		},
		methods: {
			click(item) {
                console.log('item', item);
            },
			clickTag(name) {
				this.tagList.map((item, index) => {
					item.checked = index === name ? true : false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>
